<template>
	<div class="u-page tpink-page-bgcolor">
		<u-navbar :title="Navbar.title" :custom-back="comeback" :background="Navbar.background" :border-bottom="false"
			:title-bold="true" title-color="#040503" back-icon-color="#040503"></u-navbar>
		<div>
			<div>
				<div style="width: 100%;margin: 0 auto;">
					<u-swiper :list="posters" height="200" border-radius="0" @click="clickSwiper">
					</u-swiper>
				</div>
				<div class="u-pt-10 u-pb-10 u-pl-10 u-pr-10">
					<u-search :show-action="false" :clearabled="true" shape="square" :placeholder="hotText"
						bg-color="#fffdfe" v-model="keyword" @search="search"></u-search>
				</div>
			</div>
			<div style="font-weight: bold;width: 95%;margin: 0 auto;">
				<u-tabs :list="Tablist" bg-color="#fef2f6" :show-bar="false" active-color="#000000"
					inactive-color="#6b6969" :active-item-style="{fontSize:'44rpx'}" height="100" font-size="30"
					gutter="15" :current="TabCurrent" @change="TabChange"></u-tabs>
			</div>
			<div class="resource-area tpink-page-content-bgcolor">
				<div v-if="ResourceList && ResourceList.length>0" class="u-pt-10 u-pb-10">
					<div class="career-item" v-for="(item,index) in ResourceList" :key="index">
						<div class="u-flex">
							<u-image width="80rpx" height="80rpx" border-radius="10"
								:src="getWorkersAvatar(item)"></u-image>
							<div class="career-item-content-r">
								<div class="u-flex">
									<div class="u-fz-16 u-font-bold" style="padding-right: 5rpx;">
										{{item.userName?item.userName:''}}
									</div>
									<u-icon :name="item.sex=='男'?'man':'woman'"
										:color="item.sex=='男'?'#4c97f5':'#ef8b9c'" size="35"></u-icon>
								</div>
								<div class="small-text-color u-fz-13 worker-item-desc">
									{{(item.ageGroup?(item.ageGroup+' · '):'') + (item.region?(item.region.replaceAll('-','')+' · '):'') + (item.identityType?item.identityType:'')}}
								</div>
							</div>
						</div>
						<div>
							<u-icon name="arrow-right" color="#b0aeaf"></u-icon>
						</div>
					</div>
				</div>
				<div v-else>
					<div class="u-text-center tpink-page-bgcolor" style="padding-top: 20%;">
						<u-empty text="暂无搜索结果" mode="data"></u-empty>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				posters: [],
				hotText: '请输入关键词',
				keyword: '',
				searchStr: '',
				pageNum: 1,
				pageSize: 10,
				ResourceList: [],
				Navbar: {
					title: '热门资源',
					background: {
						background: '#f1d7e0'
					}
				},
				BoyAvatar: globalData.IMGS.BoyAvatar,
				GirlAvatar: globalData.IMGS.GirlAvatar,
				TabCurrent: 0,
				Tablist: [{
						name: '推荐资源'
					},
					{
						name: '测评师'
					},
					{
						name: '区域服务商'
					},
					{
						name: '商超便利店'
					},
					{
						name: '餐饮店铺'
					},
					{
						name: '团购驿站'
					},
				]
			};
		},

		onLoad(options) {
			this.getAds()
			this.getWorkersData()
		},

		onPullDownRefresh() {
			this.pageNum = 1
			this.getWorkersData()
			this.getAds()
			setTimeout(() => {
				// 停止Loading
				uni.stopPullDownRefresh();
			}, 1000)
		},

		onReachBottom() {
			this.pageNum += 1
			this.getWorkersData()
		},

		methods: {

			/**
			 * 获取广告图
			 */
			async getAds() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/config/list",
					configType: "rs-list"
				});
				if (result.code == 200) {
					let rows = result.rows
					if (rows.length > 0) {
						for (const i in rows) {
							if (rows[i].configKey == 'rs-list') {
								let obj = {
									image: rows[i].imageLink.split(",")[0],
									link: rows[i].configLink,
									source: rows[i].configFrom
								}
								this.posters.push(obj)
							}
						}
					}
				}
			},

			/**
			 * 点击轮播图跳转
			 */
			clickSwiper(index) {
				this.routeAD(this.posters[index].link, this.posters[index].source)
			},

			/**
			 * 获取推荐工作者数据
			 * 0推荐资源；1测评师、2区域服务商、3商超便利店、4餐饮店铺、5团购驿站
			 */
			async getWorkersData() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/customer/recommend/list",
					searchType: this.TabCurrent,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchStr: this.searchStr,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.pageNum != 1) {
						this.ResourceList = this.ResourceList.concat(result.rows)
					} else {
						this.ResourceList = result.rows
					}
				}
			},

			search() {
				this.pageNum = 1
				this.searchStr = this.keyword
				this.getWorkersData()
			},

			/**
			 * 获取推荐工作者的头像地址
			 */
			getWorkersAvatar(item) {
				if (this.$u.test.contains(item.avatarUrl, globalData.CosBucket) || this.$u.test.contains(item.avatarUrl,
						'thirdwx.qlogo.cn')) {
					return item.avatarUrl
				} else {
					if (item.sex == '男') {
						return this.BoyAvatar
					} else {
						return this.GirlAvatar
					}
				}
			},

			/** 
			 * 切换tab
			 */
			TabChange(index) {
				if (this.TabCurrent != index) {
					this.TabCurrent = index
					this.pageNum = 1
					this.getWorkersData()
				}
			},

		},
	};
</script>

<style scoped>
	/* 两行或多行显示... */
	.line-ellipsis {
		width: 320rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
	}

	.sub-text-color {
		color: #bcbcbc;
	}

	.career-item {
		padding: 30rpx 30rpx 30rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.career-item-border-top {
		border-top: 2rpx solid #e2e0e1;
	}

	.career-item-content-r {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 30rpx;
	}

	.resource-area {
		width: 95%;
		margin: 0 auto;
		border-radius: 15rpx;
	}
</style>